import { Injectable } from '@angular/core';
import * as _ from 'lodash';
import { DatePipe } from '@angular/common';


@Injectable()
export class WashCartsService {

    constructor(public datePipe: DatePipe) {

    }

    // 环图
    showLine(params, item) {
        const presentData = [];
        const presentData2 = [];
        const data = [];
        for (let i = 0; i < params[0].xdata.length; i++) {
            for (let j = 0; j < params[0].ydata.length; j++) {
                if (i === j) {
                    data.push([params[0].xdata[i], params[0].ydata[j]])
                }
            }
        }
        console.log(item.arrive)
        for (const ite of item.arrive) {
            if (ite.presentTime) {
                console.log(ite.presentTime)
                presentData.push({ name: ite.presentUserName, xAxis: new Date(ite.presentTime).getTime() });
                presentData2.push({ name: ite.presentUserName, xAxis: new Date(ite.presentTime).getTime(), symbol: 'M16.000,0.000 L64.000,0.000 C72.837,0.000 80.000,7.163 80.000,16.000 C80.000,24.837 72.837,32.000 64.000,32.000 L16.000,32.000 C7.163,32.000 -0.000,24.837 -0.000,16.000 C-0.000,7.163 7.163,0.000 16.000,0.000 Z', symbolKeepAspect: true, y: 60, value: ite.presentUserName });
            }
        }
        const option = {
            tooltip: {
                show: true,
                trigger: 'axis',
                formatter: (params) => {
                    let val = this.format(params[0].value[0], 'yyyy/MM/dd HH:mm');
                    val = val.split(" ");
                    if (Math.abs(params[0].value[1]) > 100000) {
                        params[0].value[1] = params[0].value[1] / 1000 + 'K';
                    }
                    if (params[0].value[1] === null) {
                        params[0].value[1] = '--';
                    }
                    const str = '<div style="position: relative; padding: 0 5px;"><span style="display:block;font-size: 9px;">' + val[1] + '</span><span style="font-size: 12px;font-style:normal">' + params[0].value[1] + '<em style="font-size: 9px;font-style:normal">人次</em></span></div>';
                    return str;
                },
                position: (point, params) => {
                    let val = this.format(params[0].value[0], 'yyyy/MM/dd HH:mm');
                    val = val.split(" ");
                    if (parseInt(val[1], 10) >= 12) {
                        return [point[0] - 80, '10%'];
                    } else {
                        return [point[0] + 20, '10%'];
                    }
                }
            },
            grid: {
                top: 60,
                bottom: 40,
                left: '10%',
                right: '5%',
            },
            xAxis: [{
                type: 'time',
                boundaryGap: false,
                splitNumber: 24,
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc',
                        width: 0.5
                    }
                },
                axisTick: {
                    inside: true,
                    alignWithLabel: true,
                    lineStyle: {
                        color: '#ccc',
                        width: 0.5
                    }
                },
                axisLabel: {
                    show: true,
                    color: '#ccc',
                    textStyle: {
                        color: '#bbb',
                        fontSize: '9px'
                    },
                    formatter: (value, index) => {
                        if (index % 2 !== 0) {
                            return index;
                        } else {
                            return null;
                        }
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                name: '人次',
                nameLocation: 'end',
                nameTextStyle: {
                    color: '#bbb',
                    fontSize: '9px',
                    align: 'center',
                    padding: [0, 0, -5, -30]
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    margin: '5',
                    textStyle: {
                        color: '#bbb',
                        fontSize: '9px'
                    },
                    formatter: v => {
                        if (Math.abs(v) >= 1000) {
                            v = (v / 1000) + 'K';
                        }
                        return v;
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#E5E5E5'
                    }
                }
            }],
            series: [{
                type: 'line',
                smooth: true,
                xAxisIndex: 0,
                yAxisIndex: 0,
                markPoint: {
                    data: presentData2,
                    symbolSize: 1,
                    label: {
                        color: '#fff',
                        fontSize: 10,
                        padding: [3, 5, 3, 5],
                        offset: [0, -15],
                        backgroundColor: '#bbb',
                        borderRadius: [50, 50, 50, 50],
                        formatter: params => {
                            return params.value;
                        }
                    },
                    itemStyle: {
                        color: '#bbb'
                    }
                },
                markLine: {
                    symbol: "none",
                    silent: true,
                    lineStyle: {
                        width: 1,
                        type: 'solid',
                        color: '#CCC'
                    },
                    label: {
                        color: '#999',
                        fontSize: 9,
                        formatter: params => {
                            params.value = this.format(params.value, 'HH:mm')
                            return params.value + '\n\n';
                        }
                    },
                    data: presentData
                },
                itemStyle: {
                    borderWidth: 0,
                    opacity: 0,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                        colorStops: [{
                            offset: 0, color: 'rgba(178,84,227,1)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(31,181,255,1)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                }, // 线条样式
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                        colorStops: [{
                            offset: 0, color: 'rgba(178,84,227,0.3)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(31,181,255,0.2)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }, // 区域颜色渐变
                data: data
            }]
        };
        return option;
    }

    format(time, format) {
        const t = new Date(time);
        const tf = function (i) {
            return (i < 10 ? '0' : '') + i;
        };
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
            switch (a) {
                case 'yyyy':
                    return tf(t.getFullYear());
                    break;
                case 'MM':
                    return tf(t.getMonth() + 1);
                    break;
                case 'dd':
                    return tf(t.getDate());
                    break;
                case 'HH':
                    return tf(t.getHours());
                    break;
                case 'mm':
                    return tf(t.getMinutes());
                    break;
                case 'ss':
                    return tf(t.getSeconds());
                    break;
            }
        })
    }
}
